<template>
    <div class="wrapper">
      <!--header部分-->
      <header>
        <p>订单管理</p>
      </header>
  
      <!--可选订单状态-->
      <ul class="orderstate">
        <li @click="toOrdering">进行中</li>
        <li @click="toOrdered">已完成</li>
        <li @click="toOrderCancel">已取消/退单</li>
      </ul>
  
      <!-- 底部菜单部分 -->
      <BusinessFooter />
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import BusinessFooter from '../components/BusinessFooter.vue';
  
  export default {
    name: 'BusinessOrder',
    components: {
      BusinessFooter,
    },
    setup() {
      const toOrdering = () => {
        // 处理进行中订单逻辑
      };
  
      const toOrdered = () => {
        // 处理已完成订单逻辑
      };
  
      const toOrderCancel = () => {
        // 处理已取消订单逻辑
      };
  
      return {
        toOrdering,
        toOrdered,
        toOrderCancel,
      };
    },
  };
  </script>
  
  <style scoped>
  /****************** 总容器 ******************/
  .wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  /****************** header部分 ******************/
  .wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097ff;
    color: #fff;
    font-size: 4.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /****************** 推荐方式部分 ******************/
  .wrapper .orderstate {
    width: 100%;
    height: 5vw;
    margin-bottom: 5vw;
    background-color: #f5f5f5; /* 可选背景色，便于区分 */
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    top: 1vw; /* 将其放置在 header 正下方 */
    z-index: 999; /* 确保不在 header 上面 */
  }
  
  .wrapper .orderstate li {
    font-size: 4.5vw;
    color: #555;
    cursor: pointer;
  }
  </style>
  